<template>
  <div class="dashboard-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix bg-pure-dark">
        <el-row>
          <el-col :span="6" class="">
            <div class="">来路域名汇总</div>
          </el-col>
          <el-col :span="18" align="right">
            <el-date-picker v-model="gameTime" type="daterange" align="right" unlink-panels range-separator="至"
                            @change="submitFilterForm"
                            start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
                            :picker-options="pickerDayStep">
            </el-date-picker>
          </el-col>
        </el-row>
      </div>
      <div>
        <el-row>
          <el-row class="db-category-list">

            <el-col class="db-category-item"
                    v-for="(summary,key) in summaryList"
                    :span="summary.span" :xs="summary.span" :md="summary.span"
                    :key="key"
            >
              <div>
                <div class="card-name">{{summary.name}}</div>
                <div class="card-data">{{summary.data}}</div>
                <!--<div class="card-data">{{ (category.data && category.data.length==2 && category.data[1])||0}}</div>-->
              </div>
            </el-col>
          </el-row>
        </el-row>
      </div>
    </el-card>
    <el-card>
      <div slot="header" class="clearfix bg-pure-dark">
        <el-row>
          <el-col :span="6" class="">
            <div class="">域名分析</div>
          </el-col>
          <el-col :span="18" align="right">
            <el-select v-model="option" style="width: 120px;">
              <el-option
                v-for="item in locationOptions"
                :value="item.value"
                :label="item.label"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-col>
        </el-row>
      </div>
      <el-row>
        <el-col :span="12" class="">
          <refer-chart :yData="yData"></refer-chart>
        </el-col>
        <el-col :span="12">
          <refer-time-chart :xData="lineChartXData" :yData="lineChartYData"></refer-time-chart>
        </el-col>
      </el-row>

    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix bg-pure-dark">
        <el-row>
          <el-col :span="6" class="">
            <div class="">域名详细</div>
          </el-col>
          <el-col :span="18">

          </el-col>
        </el-row>
      </div>
      <div class="height-200" ref="profitChart">
        <el-table :data="summaryDataArray" border style="width:100%">
          <el-table-column
            prop="name"
            label="域名"
            width="80">
          </el-table-column>
          <el-table-column
            prop="pv"
            label="浏览次数(PV)">
          </el-table-column>
          <el-table-column
            prop="uv"
            label="独立访客(UV)">
          </el-table-column>
          <el-table-column
            prop="ip"
            label="IP">
          </el-table-column>
          <el-table-column
            prop="new"
            label="新独立访客">
          </el-table-column>
          <!--<el-table-column-->
            <!--prop="rate"-->
            <!--label="PV占比">-->
          <!--</el-table-column>-->
        </el-table>

        <!--<div class="pagination-container">-->
          <!--<el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"-->
                         <!--:current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"-->
                         <!--:layout="gridLayout" :total="tableData.total">-->
          <!--</el-pagination>-->
        <!--</div>-->
      </div>
    </el-card>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import {pickerOption} from '@/build'
  import {grid} from '@/build'

  import {referBasicApi, referSummaryApi, referSummaryTimeApi} from '@/services/api/operationalflow';
  import referChart from '../components/referChart'
  import referTimeChart from '../components/referTimeChart'

  export default {
    name: 'refer',
    components: {
      referChart,
      referTimeChart,
    },
    mixins: [pickerOption, grid],
    data() {
      // let times = _.toPeriod({
      //   start: [-1, 'days'],
      //   end: [0, 'days'],
      //   format: 'YYYY-MM-DD'
      // });
      // 本月时间本月1号至当前时间
      const monthTime = [moment().startOf('month').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
      return {
        basicData: [],
        summaryTimeData: [],
        summaryData: [],
        categoryData: {
          dateList: [],
        },
        gameTime: monthTime,
        currentCategory: undefined,
        currentGameStatisticType: 'win',
        filters: {
          stime: moment(monthTime[0]).valueOf(),
          etime: moment(monthTime[1]).valueOf() +  86399999,
        },
        option: 'pv',
        locationOptions: [
          {
            value: 'pv',
            label: '浏览次数(PV)'
          },
          {
            value: 'uv',
            label: '独立访客(UV)'
          },
          {
            value: 'ip',
            label: 'IP'
          },
          {
            value: 'new',
            label: '新独立访客'
          },
        ],
        lineChartXData: []
      }
    },
    computed: {
      ...mapGetters([]),
      ...mapState({
        trend: state => state.trend,
      }),

      summaryList() {//累计数据概要
        // let summary = this.trend.summary;
        let basic = this.basicData || {};
        return {
          recharge: {
            type: 1,
            key: 'recharge',
            name: '浏览次数(PV)',
            span: 6,
            data: basic.pv,
          },
          rechargeUser: {
            type: 2,
            key: 'rechargeUser',
            name: '独立访客(UV)',
            span: 6,
            data: basic.uv,
          },
          withdraw: {
            type: 3,
            key: 'withdraw',
            name: 'IP',
            span: 6,
            data: basic.ip,
          },
          withdrawUser: {
            type: 4,
            key: 'withdrawUser',
            name: '新独立访客',
            span: 6,
            data: basic.new,
          },
        }
      },
      yData() {
        let result = [];
        let currentTypeData = this.summaryData && this.summaryData[this.option] || {};
        _.forIn(currentTypeData, (value, key) => {
          // key pv
          // value {'www.baidu.com':'20'}
          result.push({name: key, value: value})
        })
        return result
      },
      lineChartYData() {
        // {
        //   name: type.title,
        //     type: 'line',
        //   // stack: '总量',
        //   data: (ydata && ydata.value) || [],
        //   animationDuration
        // }
        this.lineChartXData = [];
        let sortedData = [];
        _.forIn(this.summaryTimeData, (value, key) => {
          sortedData.push({date: key, domains: value});
        })
        sortedData = _.sortBy(sortedData, (item) => {
          return item.date;
        })
        let domainsObj = {};
        _.each(sortedData, (item, index) => {
          this.lineChartXData.push(item.date);
          _.forIn(item.domains, (values, key) => {
            let targetObj = domainsObj[key];

            if (!targetObj) {
              domainsObj[key] = [];
              domainsObj[key][index] = values;
            } else {
              targetObj[index] = values;
            }
          })
        })
        let result = []
        _.forIn(domainsObj, (value, key) => {
          result.push({
            name: key,
            type: 'line',
            data: value || [],
            animationDuration: 1000,
          })
        })
        return result;
      },

      summaryDataArray() {
        let domains = {}
        let resultArr = [];
        _.forIn(this.summaryData, (domainValue, key) => {
          let domain = {};
          let opt = key;//pv
          _.forIn(domainValue, (value, subKey) => {
            let exist = domains[subKey];
            if (exist) {
              exist[key] = value
            } else {
              domains[subKey] = {[key]: value};
            }
          });

        })
        _.forIn(domains, (value, key) => {
          resultArr.push({domain: key, ...value})
        })
        return resultArr;
      },
    },
    watch: {},
    created() {

      this.bindGet(referBasicApi, 'basicData', {
        action: 'getGrid',
        sendingData: 'filters',

      });
      this.bindGet(referSummaryTimeApi, 'summaryTimeData', {
        action: 'getSummaryTime',
        sendingData: 'filters',

      });
      this.bindGet(referSummaryApi, 'summaryData', {
        action: 'getSummary',
        sendingData: 'filters',
      });

    },
    mounted() {
      //tab页记录访问日志
      this.$store.dispatch(types.SAVE_OPERATION_LOG,{content:_.getContent(this.$route,'来路域名统计',true)});
      this.submitFilterForm()
    },
    beforeDestroy() {

    },
    methods: {
      submitFilterForm() {
        const time = this.gameTime;
        let stime = undefined, etime = undefined;
        if (!_.isUndefined(time) && _.isArray(time)) {
          stime = moment(time[0]).valueOf();
          etime = moment(time[1]).valueOf() +  86399999;
        }
        this.filters = {stime, etime, project: consts.PLATFROM_PREFIX};
        // this.gridSearch()
        this.doGet({action: 'getGrid'});
        this.doGet({action: 'getSummary'});
        this.doGet({action: 'getSummaryTime'});
      },

    }
  }
</script>
<style lang="scss" scoped>
  $border-color-1: #DCDFE6;


  .box-card {
    width: 100%;
    margin: 10px 0;
  }

  .db-category-list {
    border: 1px solid $border-color-1;
    overflow: hidden;
    /*display: flex;*/
  }

  .db-category-item {
    height: 100px;
    padding: 10px;
    border-right: 1px solid $border-color-1;
    line-height: 16px;
    cursor: pointer;

    &:last-child {
      border-right: 0;
    }

    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;

    &.active {
      background: #e7e7e7;
      /*color: #fff;*/
    }

    > div {
      width: 100%;
      height: 100%;
    }
  }

  .card-name {
    height: 50px;
    text-align: center;
    flex: 0 1 50%;
    /*white-space: nowrap;*/
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .card-data {
    height: 25px;
    text-align: center;
    flex: 0 1 25%;
  }

</style>
